.integral_head {
    position: relative;
    height: 288rpx;
    background-color: var(--themColor);

    .integral_sum {
        padding: 20rpx 0 0 48rpx;
        font-size: 80rpx;
        color: #FFFFFF;
    }

    .integral_record {
        display: flex;
        align-items: center;
        padding-left: 48rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        letter-spacing: 4rpx;
    }

    .order_center {
        position: absolute;
        right: 0;
        top: 65rpx;
        padding-left: 20rpx;
        display: flex;
        align-items: center;
        width: 160rpx;
        height: 65rpx;
        text-align: center;
        border-radius: 32rpx 0 0 32rpx;
        background-color: #FFFFFF;

        .text {
            padding-left: 6rpx;
            font-size: 28rpx;
            color: var(--themColor);
        }
    }

    .integral_container {
        position: absolute;
        top: 188rpx;
        left: 24rpx;
        width: 701rpx;

        .title {
            display: flex;
            justify-content: space-between;
            padding: 24rpx 0;
            border-bottom: 2rpx solid var(--lineColor);

            .left {
                font-size: 32rpx;
                color: var(--BGColor);
            }

            .right {
                font-size: 28rpx;
                color: var(--themColor);
            }
        }

        .list {
            padding: 20rpx 0;

            .item {
                position: relative;
                margin: 10rpx auto;
                width: 200rpx;
                padding-bottom: 20rpx;
                border-radius: 18rpx;
                overflow: hidden;
                border: 2rpx solid var(--lineColor);

                .name {
                    padding-bottom: 5rpx;
                    text-align: center;
                    font-size: 28rpx;
                    color: var(--BGColor);
                }

                .price {
                    text-align: center;
                    font-size: 26rpx;
                    color: var(--themColor);
                }

                .no_stock {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 200rpx;
                    height: 200rpx;

                    .modal {
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.15);
                    }

                    .icon_img {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .loading,
            .nomore {
                padding: 20rpx 0;
                text-align: center;
                font-size: 28rpx;
                color: var(--BGColor);
            }
        }
    }
}